     
     <template>
        <div>
     <!-- 弹框 -->
     <el-dialog :visible="dv" width="680px" title="新增规则"  @close="closeDialog">
        <!-- 表单接口 -->
        <div class="form-container">
          <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="top">
            <el-form-item label="计费规则编号" prop="ruleNumber">
              <el-input v-model="addForm.ruleNumber" />
            </el-form-item>
            <el-form-item label="计费规则名称" prop="ruleName">
              <el-input v-model="addForm.ruleName" />
            </el-form-item>
            <el-form-item label="计费方式" prop="chargeType">
              <el-radio-group v-model="addForm.chargeType" size="small">
                <el-radio label="duration" border>时长收费</el-radio>
                <el-radio label="turn" border>按次收费</el-radio>
                <el-radio label="partition" border>分段收费</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="flex-container">
              <el-form-item label="免费时长">
                <el-input v-model="addForm.freeDuration" />
              </el-form-item>
              <el-form-item label="收费上限">
                <el-input v-model="addForm.chargeCeiling" />
              </el-form-item>
            </div>
            <el-form-item label="计费规则" required>
              <!-- 按时长收费区域 -->
              <div class="duration" v-if="addForm.chargeType === 'duration'">
                <div div class="item" style="display: flex;">
                <el-form-item  prop="durationTime">
                  每 <el-input v-model="addForm.durationTime" class="input-box" style="width: 100px;"/> 小时
                </el-form-item>
                <el-form-item  prop="durationPrice">
                  <el-input v-model="addForm.durationPrice" class="input-box" style="width: 100px;"/> 元
                </el-form-item>
              </div>
              </div>
              <!-- 按次收费区域 -->
              <div class="turn" v-if="addForm.chargeType === 'turn'">
                <div div class="item" style="display: flex;">
                <el-form-item  prop="turnPrice"> 
                  每次 <el-input v-model="addForm.turnPrice" class="input-box" style="width: 100px;"/> 元
                </el-form-item>
              </div>
              </div>
              <!-- 按分段收费区域 -->
              <div class="partition" v-if="addForm.chargeType==='partition'">
                <div div class="item" style="display: flex;">
                <el-form-item  prop="partitionFrameTime"> 
                  <el-input v-model="addForm.partitionFrameTime" class="input-box" style="width: 100px;"/>小时内,每小时收费
                </el-form-item>
                <el-form-item  prop="partitionFramePrice"> 
                    <el-input v-model="addForm.partitionFramePrice" class="input-box" style="width: 100px;"/> 元
                </el-form-item>
              </div>
             
              <div div class="item" style="display: flex;">
                <el-form-item  prop="partitionIncreaseTime">
                  每增加
                  <el-input v-model="addForm.partitionIncreaseTime" class="input-box" style="width: 120px;"/>小时,增加
                </el-form-item>
              
                <el-form-item  prop="partitionIncreasePrice">
                  <el-input v-model="addForm.partitionIncreasePrice" class="input-box" style="width: 120px;"/> 元
                </el-form-item>
                
              </div>
      
            </div>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button size="mini" @click="closeDialog">取 消</el-button>
          <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
        </template>
      </el-dialog>
    </div>
</template>


<script>
import {createRuleAPI } from '@/api/rule'
export default{
    props:{
      dv:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            addForm: {
      ruleNumber: '', // 计费规则编号
      ruleName: '', // 计费规则名称
      chargeType: 'duration', // 计费规则类型 duration / turn / partition
      chargeCeiling: null,
      freeDuration: null,
      // 时长计费独有字段
      durationTime: null, // 时长计费单位时间
      durationPrice: null, // 时长计费单位价格
      durationType: 'hour',
      // 按次收费独有字段
      turnPrice: null,
      // 分段计费独有字段
      partitionFrameTime: null, // 段内时间
      partitionFramePrice: null, // 段内费用
      partitionIncreaseTime: null, // 超出时间
      partitionIncreasePrice: null // 超出费为收费价钱

    }, // 计费规则表单对象
    addFormRules: {
      ruleNumber: [
        {
          required: true,
          message: '请输入规则编号',
          trigger: 'blur'
        }
      ],
      ruleName: [
        {
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }
      ],
      chargeType: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      durationTime: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      durationPrice: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      turnPrice: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      partitionFrameTime: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      partitionFramePrice: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      partitionIncreaseTime: [
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
      partitionIncreasePrice:[
        {
          required: true,
          message: '请选择收费类型',
          trigger: 'blur'
        }
      ],
    } // 计费规则校验规则对象
        }
    },
  
    watch:{
    'addForm.chargeType'(val){
      // console.log(val)
      this.$refs.addForm.clearValidate(["durationTime","durationPrice","turnPrice","partitionFrameTime","partitionFramePrice","partitionIncreaseTime","partitionIncreasePrice"])
    }
  },

  created(){
    console.log(this.$parent)
  },
  methods: {
    closeDialog(){
      this.$parent.dialogVisible=false
      this.$refs.addForm.resetFields()
      this.addForm.freeDuration=''
      this.addForm.chargeCeiling=''
    },
        confirmAdd() {
        this.$refs.addForm.validate(async valid => {
        if (valid) {
        await createRuleAPI(this.addForm)

        // 子组件调用父组件中的方法
        // 1、this.$parent
        // 2:this.$emit()  
        this.$emit("getList")
        // this.$parent.getList()
        this.$parent.dialogVisible=false
        }
    })
},
  },
}
</script>